<!--
 * @Author: your name
 * @Date: 2021-12-22 16:29:39
 * @LastEditTime: 2021-12-22 20:41:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \project_am\am-app\src\views\manager\OrderDetails.vue
-->
<template>
  <div class="work">
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft" />
    <van-row>
      <van-col span="0" style="text-align: center; font-size: 48px"> </van-col>
      <van-col span="0">
        <div>工单： {{ order.id }}</div>
        <div>类型： {{ order.type }}</div>
        <div>状态： {{ order.status }}</div>
        <div>设备： {{ order.device_name }}</div>
        <div>工程： {{ order.engineer_name }}</div>
        <div>描述： {{ order.bill_why }}</div>
        <div>完成工人： {{ order.account_name }}</div>
        <div>完成情况：</div>
      </van-col>
    </van-row>
    <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="p in order.end_photos" :key="p" @click="toView(p)">
        <van-image :src="p" />
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>

import { ImagePreview } from "vant";
import { Toast } from 'vant';

export default {
  data() {
    return {
      order: {},
    };
  },
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },

  mounted() {
    this.order = this.$route.query;
  },
  methods: {
    // 完成工单
    onClickLeft() {
      Toast('返回');
    },
    toView(p) {
      ImagePreview({
        images: [p],
        closeable: true,
      });
    },
     onClickLeft(row){
      this.$router.push({
        path:'/manager/order',
        query:row
      })
    },
  },
};
</script>
